<template>
  <div class="tabs">
    <!-- <el-button size="small" @click="store.addTab(editableTabsValue)">
      add tab
    </el-button> -->
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      class="demo-tabs"
      closable
      @tab-remove="store.removeTab"
      @tab-change="fn"
    >
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

import { useTabs } from "../../../stores/tabs";
import type { TabPaneName } from "element-plus";
import { useRouter } from "vue-router";

const store = useTabs();
const router = useRouter();

const editableTabsValue = computed(() => store.editableTabsValue);
const editableTabs = computed(() => store.editableTabs);

const fn = (name: TabPaneName) => {
  console.log(333, name);
  router.push("/home/" + name);
};
</script>

<style lang="less" scoped>
.tabs {
  position: absolute;
  height: 40px;
  bottom: 0;
  left: 60px;
}

:deep(.el-tabs__item) {
  color: #fff;
}

:deep(.is-active) {
  color: #ffd04b;
}
</style>
